<div class="ama-connector-editor" data-automation-id="connector-editor-modeling">
    <ng-container *ngIf="!(loadingState$ | async); else loading;">
        <ng-container *ngIf="editorContent$ | async; let editorContent">

            <modelingsdk-model-header class="ama-connector-header"
                [modelName]="modelType">
            </modelingsdk-model-header>

            <ng-container *ngIf="isAdvancedEditorEmbedded()">
                <mat-tab-group
                    (selectedTabChange)="onTabChange($event)"
                    [@.disabled]="true"
                    class="ama-connector-tab-group"
                    [(selectedIndex)]="selectedTabIndex" animationDuration="0ms">
                    <mat-tab label="{{ 'ADV_CONNECTOR_EDITOR.TABS.CONNECTOR_EDITOR' | translate }}">
                        <ng-template matTabContent>
                            <div class="ama-connector-page"
                                data-automation-id="connector-advanced-tab">
                                <adf-dynamic-component
                                    [id]="componentKey"
                                    [data]="getDynamicComponentData(editorContent)">
                                </adf-dynamic-component>
                            </div>
                        </ng-template>
                    </mat-tab>
                    <mat-tab label="{{ 'ADV_CONNECTOR_EDITOR.TABS.JSON_EDITOR' | translate }}">
                        <ng-template matTabContent>
                            <div class="ama-connector-page ama-connector-page-raw-editor"
                                data-automation-id="connector-basic-tab">
                                <modelingsdk-code-editor
                                    [content]="editorContent"
                                    (positionChanged)="codeEditorPositionChanged($event)"
                                    (changed)="onChangeAttempt($event)"
                                    [fileUri]="fileUri"
                                    [language]="languageType">
                                </modelingsdk-code-editor>
                            </div>
                        </ng-template>
                    </mat-tab>
                </mat-tab-group>
            </ng-container>

            <ng-container *ngIf="!isAdvancedEditorEmbedded()">
                <modelingsdk-code-editor
                    class="ama-connector-json"
                    [content]="editorContent"
                    (positionChanged)="codeEditorPositionChanged($event)"
                    (changed)="onChangeAttempt($event)"
                    [fileUri]="fileUri"
                    [language]="languageType">
                </modelingsdk-code-editor>
            </ng-container>
        </ng-container>
    </ng-container>

    <ng-template #loading>
        <div class="ama-connector-editor-spinner">
            <mat-spinner></mat-spinner>
        </div>
    </ng-template>
</div>
